<template>
    <div>
        <!-- <div>
            <h2>state</h2>
            <p>{{ demo.a }}</p>
            <p>{{ demo.b }}</p>
        </div>
        <div>
            <h2>getters</h2>
            <p>{{ demo.doubleA }}</p>
            <p>{{ demo.doubleB }}</p>
            <p>{{ demo.doubleBoth }}</p>
        </div>
        <div>
            <h2>actions-同步</h2>
            <p><button @click="demo.addA">a++</button></p>
            <p><button @click="demo.addAN(10)">a+10</button></p>
        </div>
        <div>
            <h2>actions-异步</h2>
            <p><button @click="demo.addA_Async">a++</button></p>
            <p><button @click="demo.addB_Async()">b++</button></p>
            <p><button @click="demo.addBoth_Async()">b++</button></p>
        </div> -->

        <div>
            <h2>state</h2>
            <p>{{ a }}</p>
            <p>{{ b }}</p>
        </div>
        <div>
            <h2>getters</h2>
            <p>{{ doubleA }}</p>
            <p>{{ doubleB }}</p>
            <p>{{ doubleBoth }}</p>
        </div>
        <div>
            <h2>actions-同步</h2>
            <p><button @click="addA">a++</button><button @click="a++">a++</button></p>
            <p><button @click="addAN(10)">a+10</button></p>
        </div>
        <div>
            <h2>actions-异步</h2>
            <p><button @click="addA_Async">a++</button></p>
            <p><button @click="addB_Async()">b++</button></p>
            <p><button @click="addBoth_Async()">b++</button></p>
        </div>
    </div>
</template>



<script setup>
    import {storeToRefs} from "pinia"
    // 引入store模块
    import {useDemoStore} from "@/stores/demo.js";

    let demo = useDemoStore(); // 获取store实例
    console.log(1111, demo); // (demo => 响应式代理)
    
    // 对数据直接进行解构 => 丧失响应性
    // let {a,b,doubleA,doubleB} = demo;  // a = demo.a;
    // console.log(a,b);  // 1  2  

    // 如何保持其响应性
    // 1. vue => toRef  toRefs()
    // 2. 使用pinia提供的storeToRefs

    // let obj = storeToRefs(demo);  // {a:ref(),b:ref()}
    // console.log(obj);

    let {a,b,doubleA,doubleB,doubleBoth} =  storeToRefs(demo);  // a = demo.a;
    console.log(a,b);  // 1  2  

    // 对方法直接进行解构 => 没有问题(函数也是一个特殊的对象->引用类型)
    let {addA,addAN,addA_Async,addB_Async,addBoth_Async} = demo;
    console.log(addA);

  
</script>

<style lang="scss" scoped>

</style>